<script setup lang="ts">
import { defineProps, ref } from 'vue';
import { getTopTableData } from '@/service/api/modules/intelligent-iogistics/materiallistc';

interface Props {
  tableData: any[];
}

const emit = defineEmits(['getTopData']);

const props = defineProps<Props>();

const columnChecks = ref([
  {
    key: 'index',
    dataIndex: 'index',
    title: '序号',
    width: 70,
    align: 'center',
    ellipsis: true
  },
  {
    key: 'podCode',
    width: 120,
    dataIndex: 'podCode',
    title: '货架编号',
    align: 'center',
    ellipsis: true
  },
  {
    key: 'materialLot',
    dataIndex: 'materialLot',
    title: '物料批次',
    align: 'center',
    ellipsis: true
  },
  {
    key: 'bindDate',
    dataIndex: 'bindDate',
    title: '时间',
    align: 'center',
    ellipsis: true
  }
]);
// const tableData = ref([]);
const loading = ref(false);

// function getData() {
//   getTopTableData().then(({ data, error }) => {
//     if (!error) {
//       console.log('data :>> ', data);
//     }
//   });
// }

// getData();

function getData() {
  emit('getTopData');
}
</script>

<template>
  <div class="h-full w-full flex-col-stretch gap-5px">
    <div class="title font-size-16px color-blue font-bold">
      上PIN暂存物料列表:
      <span title="刷新列表" class="ml8px">
        <icon-ic-round-refresh class="cursor-pointer align-sub text-icon" @click="getData" />
      </span>
    </div>
    <ATable
      :columns="columnChecks"
      :data-source="props.tableData"
      bordered
      size="small"
      :loading="loading"
      row-key="id"
      :pagination="false"
      :scroll="{ x: 'auto', y: 'auto' }"
      class="h-full"
    />
  </div>
</template>

<style lang="scss" scoped>
.title {
  color: #646cff;
}
</style>
